<template>
  <div>
    <!-- 头部 --state-->
    <div class="nav">
     <p>
       <span>.</span>
       销售计划详情
     </p>
      <div id="nav_go4">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
          >返回</el-button
        >
      </div>
    </div>
    <!-- 头部 --end-->
    <!-- 合同信息 --start-->
    <div class="conter_box1" :data="listData">
      <p><em>1</em> 计划信息</p>
      <ul>
        <li>
          <span>企业名称</span>
          <el-input
            placeholder="请输入企业名称"
            v-model="listData.enterpriseName"
            style="width: 70%"
            disabled
          ></el-input>
        </li>
        <li>
          <span>联系人</span>
          <el-input
            placeholder="请输入联系人"
            v-model="listData.contacts"
            style="width: 70%"
            disabled
          ></el-input>
        </li>
        <li>
          <span>联系方式</span>
          <el-input
            v-model="listData.contactsPhone"
            placeholder="请输入联系方式"
            style="width: 70%"
            disabled
          >
          </el-input>
        </li>
        <li>
          <span>企业地址</span>
          <el-input
            v-model="listData.adress"
            placeholder="请输入企业地址"
            style="width: 70%"
            disabled
          ></el-input>
        </li>
        <li>
          <span>开户银行</span>
          <el-input
            v-model="listData.kaipiaoKaihuhang"
            placeholder="请选择开户银行"
            style="width: 70%"
            disabled
          >
          </el-input>
        </li>
        <li>
          <span>开户账号</span>
          <el-input
            v-model="listData.kaipiaoKaihuaccount"
            placeholder="请选择开户账号"
            style="width: 70%"
            disabled
          ></el-input>
        </li>
        <li>
          <span>纳税人识别号</span>
          <el-input
            placeholder="请输入纳税人识别号"
            v-model="listData.nashui"
            style="width: 70%"
            disabled
          ></el-input>
        </li>
      </ul>
    </div>
    <!-- 合同信息 --end-->

    <!-- 产品信息 --start-->
    <div class="conter_box3">
      <p><em>2</em> 产品信息</p>
      <template>
        <el-table :data="products" style="width: 100%" max-height="200px">
          <el-table-column label="产品图号" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.productNumber" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.productName" disabled></el-input>
            </template>
          </el-table-column>

          <el-table-column label="单价 (元)" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.price" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单位" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.danwei" disabled></el-input>
            </template>
          </el-table-column>
<!--          <el-table-column label="税率" align="center">-->
<!--            <template slot-scope="scope">-->
<!--              <el-input v-model="scope.row.shuilv" disabled></el-input>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column label="需求数量" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.number" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column label="小计 (元)" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.xiaoji" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column label="计划到货日期" align="center">
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.planTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 95%"
                disabled
              >
              </el-date-picker>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 产品信息 --end-->

    <!-- 底部 -->
    <div class="bottom">
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      listData: {
        enterpriseNumber: "",
        enterpriseName: "",
        contacts: "",
        contactsPhone: "",
        adress: "",
        id: "",
        kaipiaoKaihuhang: "",
        nashui: "",
        kaipiaoKaihuaccount: "",
      },
      clientIdarr: [],
      productLists:[],
      products:[{}],
      clientId:"",
    };
  },
  created() {
    this.getDat(this.$route.query.id)
  },
  methods: {
    getDat(id) {
      axios(
        "/JX_java/sales/orderFrom/getSaleOrderPlanDetails?spId=" +
        id
      ).then((res) => {
        let result = res.data.data;
        this.listData = result.clientMessage;
        this.products = result.products;
      });
    },
    //返回
    revert() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.nav {
  //border: solid 1px red;
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;

    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go4 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}
.ebtn {
  margin-right: 20px;
}
.conter_box1 {
  background: $white;
  height: 250px;
  width: 98%;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;
    li {
      width: 33%;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: center;
      span{
        display: inline-block;
        width: 25%;
      }
    }
  }
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $blue;
  position: absolute;
  top: 22px;
  left: 10px;
}
.conter_box2 {
  background: $white;
  height: 100px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;
  p {
    height: 40px;
    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }
  ul {
    width: 100%;
    display: flex;
    color: #909399;
    li {
      width: 20%;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
}
.conter_box3 {
  background: $white;
  // min-height: 160px;
  //max-height: 220px;
  width: 98%;
  height: 400px;
  margin-top: 10px;
  padding: 5px 1% 0 1%;
  p {
    height: 40px;

    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }
  // ul {
  //   width: 100%;
  //   display: flex;
  //   color: #909399;
  //   li {
  //     width: 20%;
  //     font-size: 14px;
  //     margin-bottom: 10px;
  //   }
  // }
}
.bottom {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 20px;
  // background: $white;
  position: relative;
  p {
    width: 20%;
    // height: 50px;
    line-height: 40px;
    position: absolute;
    top: 30px;
    left: 1%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
